<template>
  <div id="user">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="search">
          <el-input
            placeholder="请输入..."
            v-model="inputData"
            type="text"
            class="my-input"
          ></el-input>
          <el-button
            :type="ElButtonType"
            size="large"
            @click="handleSearchClick"
            >搜索</el-button
          >
        </div>
      </el-col>
      <el-col :span="18"> </el-col>
      <el-col :span="2">
        <!-- <div class="" style="text-align: right">
          <el-button :type="ElButtonType" size="large">新增</el-button>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { themePinia } from "@/libs/pinia/theme";
import { computed } from "vue";
const theme = themePinia();
const inputData = ref();
// emits
const emits = defineEmits(["handleSearchClickEmit"]);

const handleSearchClick = () => {
  emits("handleSearchClickEmit", inputData);
};

const GridContentBackGroundColor = computed(
  () => theme.gridContentBackgroundColor
);
const ElinputBackgroundColor = computed(() => theme.ElinputBackgroundColor);
const ElinputTextColor = computed(() => theme.ElinputTextColor);
const ElinputBorderColor = computed(() => theme.ElinputBorderColor);
const ElinputOpacity = computed(() => theme.ElinputOpacity);
const ElinputHoverColor = computed(() => theme.ElinputHoverColor);
const ElButtonType = computed(() => theme.ElButtonType as any);


</script>

<style scoped lang="scss">
#user {
  background-color: #fff;
  border-radius: 0.4rem;
  padding: 1.2rem;
  .search {
    display: flex;
    align-items: center;
  }
}
:deep(.el-input__wrapper) {
  //移除主盒子样式
  box-shadow: none !important;
  background-color: rgba($color: #000000, $alpha: 0) !important;
  .el-input__inner {
    background-color: v-bind(ElinputBackgroundColor);
    color: v-bind(ElinputTextColor);
    border: 1px;
    border-color: v-bind(ElinputBorderColor);
    border-style: solid;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    transition: all 250ms ease;
    border-radius: 0.4rem;
    &:hover {
      border-color: v-bind(ElinputHoverColor);
    }
  }
}
</style>
